<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="container">
                    <el-col id="header">
                        <span>{{nodeData.name}}</span>
                    </el-col>
                    <el-col>
                        <el-main>
                            <el-select class="options" v-model="commandSelected" @change="handleSelectionChange()">
                                <el-option label="启动节点" value="1" />
                                <el-option label="停止节点" value="2" />
                                <el-option label="查看区块" value="3" />
                            </el-select>
                            <el-select class="options" v-model="item" :style="{display: selectBlock}"
                                @change="handleSelectionChange()">
                                <el-option label="system-channel" value="system-channel" />
                            </el-select>
                            <br>
                            <el-title class="options" :style="{display: selectBlock}">最旧区块:-2 最新区块:-1 指定区块数:>=0
                            </el-title>
                            <el-input class="options" v-model="seekNum" :style="{display: selectBlock}"></el-input>
                            <el-button class="options" type="primary" @click="runCommand">执行命令</el-button>
                        </el-main>
                    </el-col>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="container">
                    <el-col id="header">
                        日志
                    </el-col>
                    <el-scrollbar height="700px">
                        <div style="white-space: pre-line; margin: 10px">{{logs.value}}</div>
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios';
import { useOrderNodeStore } from "../store/orderConsole";
import { ElMessage } from "element-plus";

const commandSelected = ref();
const order = useOrderNodeStore();
const logs = reactive({}) as any;
const nodeData = reactive({
    "name": "",
    "type": "",
    "ip": "",
    "port": "",
    "id": "",
    "league": ""
}) as any;
const item = ref();
const seekNum = ref();

const loadOrderNode = () => {
    console.log(order.getOrderNodeName);
    axios.get('prefix/api/entity/orderers/' + order.getOrderNodeName, {
    }).then(function (response) {
        nodeData.name = response.data.Name;
        nodeData.type = response.data.LedgerType;
        nodeData.ip = response.data.ListenAddress;
        nodeData.port = response.data.ListenPort;
        nodeData.id = response.data.LocalMSPID;
        nodeData.leaguels = response.data.Consortiums;
        nodeData.orderType = response.data.OrdererType;
    }).then(() => loadPeerNodeExist())
}
onMounted(() => {
    loadOrderNode();
    
})

const peerExist = ref(false);
const loadPeerNodeExist = () => {
    console.log("查看")
    console.log('admin' + nodeData.id.substring(5))
    axios.get('prefix/api/entity/peers', {
    }).then(function (response) {
        let length = response.data.peers == null ? 0 : response.data.peers.length;
        console.log(response.data.peers)
        for (let i = 0; i < length; i++) {
            if (response.data.peers[i].AdminMSPID === 'admin' + nodeData.id.substring(5)) {
                
                peerExist.value = true;
                break;
            }
        }
    })
}

const selectBlock = ref("none");
// 选项框选项改变时的动作
const handleSelectionChange = () => {
    selectBlock.value = "none";
    switch (commandSelected.value) {
        case ("1"): {
            break;
        }
        case ("2"): {
            break;
        }
        case ("3"): {
            selectBlock.value = "";
            break;
        }
    }
}

const runCommand = () => {
    switch (commandSelected.value) {
        case ("1"): {                               // 启动节点
            putNodeStart();
            break;
        }
        case ("2"): {                               // 停止节点
            putNodeStop();
            break;
        }
        case ("3"): {                               // 通道清单
            blockAction();
            break;
        }
    }
}


const putNodeStart = () => {
    if (peerExist.value === false) {
        ElMessage.error("请先创建对应的peer节点");
        return;
    }
    else {
        axios.put('/prefix/api/entity/orderers/' + nodeData.name + '/cmd', {
            "Cmd": "NODE_START",
            "NodeName": nodeData.name
        }).then(function (response) {
            logs.value = response.data.msg;
        }).catch(function (error) {
            ElMessage.error('error');
            console.log(error);
        })
    }

}

const putNodeStop = () => {
    axios.put('/prefix/api/entity/orderers/' + nodeData.name + '/cmd', {
        "Cmd": "NODE_STOP",
        "NodeName": nodeData.name
    }).then(function (response) {
        logs.value = response.data.msg;
    }).catch(function (error) {
        ElMessage.error('error');
        console.log(error);
    })
}

const blockAction = () => {
    console.log(nodeData.name);
    axios.put('/prefix/api/entity/orderers/' + nodeData.name + '/cmd', {
        "Cmd": "SEEK",
        "NodeName": nodeData.name,
        "ChannelId": item.value,
        "Seek": seekNum.value
    }).then(function (response) {
        const JSONmsg = eval("(" + response.data.msg + ")");
        // console.log(JSON.stringify(JSONca, null, 2))
        const text = JSON.stringify(JSONmsg, null, 2);
        logs.value = `${text}\n${response.data.state}`;
        // console.log(response.data.state)
    }).catch(function (error) {
        ElMessage.error('error');
        console.log(error);
    })
}

</script>
  
<style scoped>
.options {
    margin-top: 6px;
    margin-bottom: 6px;
}

#header {
    height: 60px;
    background-color: rgba(220, 220, 220, 0.315);
    display: flex;
    align-items: center;
    text-align: left;
    font-weight: 510;
    font-size: medium;
}

.container {
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>